<template>
    <div>
        <van-nav-bar title="春雨医生" left-text="" left-arrow @click="onClickLeft" />
        <div class="title">
            <div>
                <h3 style="font-weight: 900;font-size: 18px;margin-left: 25px;margin-top: 10px;">缓解肩颈疲劳酸痛</h3>
            </div>
            <div class="img">
              <p><span><img src="../../../public/healhtool/aa.png" alt="" ></span><span class="num">4227</span><span class="pop">人已完成</span></p>
               <div class="orde">
                <span>订阅通知</span>
               </div>

            </div>
            <div class="tiao" @click="Toindex">
                <p>8天健康养成计划</p> <span class="come">进入计划目录></span>
            </div>
            <div class="jz">
                <span>缓解肩颈疲劳酸痛</span>
            </div>
            <div class="zj">
                拯救肩颈酸痛,这样练完太舒服啦
            </div>
            <img src="../../assets//shu.jpg" alt="" class="HandleImgs">
            <div>
                <video src="../../assets//黄霄雲 - 星辰大海(2022河南卫视“青春万岁”五四青年节特别节目).mkv" controls autoplay
                    class="video"></video>
            </div>
        </div>
          <div class="finish1">
        <div class="finish" sticky>
            点击完成
           </div>
           </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
const list = ref<any>([])
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const slicedData = ref(list.value.slice(1, 20));
console.log(slicedData.value);

const Toindex = () => {
    router.push({ path: '/cultivation' })
}
const onClickLeft = () => history.back()
const getlist = async () => {
    await axios.get('/Todetail/goodVideo').then(res => {
        console.log(res)
        list.value = res.data.data
        console.log(list.value)
    }).catch(err => {
        console.log(err)
    })
}
getlist()
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 300px;
    background-color: #ffff;
    .img{
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      left: -5px;
      .num{
        top: 27px;
        font-size: 13px;
        left:130px;
        position: absolute;
       color: #0eba89;
      }
      .pop{
            position: absolute;
       left: 160px;
       font-size: 13px;
       top: 25px;
        color: #c3c3c3;
      }
      img{
        width: 100px;
        height: 35px;
        margin-top: 10px;
        margin-left: 23px;
      }
      .orde{
        width: 70px;
        border: 1px solid #c3c3c3;
        text-align: center;
        border-radius: 14px;
        height: 20px;
        line-height: 20px;
        color: #c3c3c3;
        font-size: 13px;
       margin-top: 3px;
       margin-right: 15px;
      }
    }

}

.tiao {
    width: 90%;
    height: 47px;
    background-color: #f4f6f7;
 display: flex;
  align-items: center;
     margin-left: 15px;
    p {
        line-height: 70px;
        margin-left: 18px;
        font-size: 15px;
        position: absolute;
        color: #8b8c8c;;
    }

    span {
        line-height: 70px;
        right: 30px;
        position: absolute;
    }
    .come{
      font-size: 15px;
      margin-right: 10px;
      color: #8b8c8c;
    }
}

.video {
    width: 80%;
    height: 300px;
    position: absolute;
    top: 240px;
    left: 45px;
  
}

.jz {
    width: 87%;
    position: absolute;
    top: 220px;
    left: 20px;
    height: 40px;
    background: linear-gradient(to right, #0eba89, #22cc5c);
    line-height: 40px;
    color: #fff;
    margin-left: 20px;
    border-radius: 10px 10px 0 0;

    span {
        margin-left: 10px;
    }
}

.zj {
    margin-left: 50px;
    margin-top: 85px;
    color: #c3c3c3;
  font-size: 14px;
   z-index: 9999;
   background: #fff;
}
.HandleImgs{
    position: absolute;
    top: 215px;
}
   .finish1{
            width: 100%;
            height: 80px;
            background-color:white;

             .finish{
            width: 95%;
            height: 40px;
            background:#1cc86b;
            line-height: 40px;
            margin-left: 15px;
            margin-top: 10px;
            text-align: center;
            color: #fff;
            font-weight: 850;
            position: fixed;
            bottom: -23px;
            margin-bottom: 30px;
         }
        }
</style>
